<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import refresh from '@/components/refresh.vue'
import {useRouter} from "vue-router";
import '@/api/user.js'
import {getProductList} from "@/api/shoe.js";

const router = useRouter();
const type = ref([['品牌专区', 'hot-o'], ['限时补贴', 'hot-o'], ['每日签到', 'hot-o'], ['天天领券', 'hot-o'], ['许愿树', 'hot-o'], ['品牌专区', 'hot-o'], ['限时补贴', 'hot-o'], ['每日签到', 'hot-o'], ['天天领券', 'hot-o'], ['许愿树', 'hot-o']]);
const value = ref('');
const price = ref(100);
const active = ref(0);
const title = ref([{title: '推荐', url: ''}, {title: '鞋类', url: ''}, {title: '潮服', url: ''}, {
  title: '包袋',
  url: ''
}, {title: '手表', url: ''}, {title: '美妆', url: ''}, {title: '配饰', url: ''}, {
  title: '数码',
  url: ''
}, {title: '潮玩', url: ''}, {title: '运动', url: ''}, {title: '家居', url: ''}, {
  title: '车品',
  url: ''
}, {title: '女装', url: ''}, {title: '家电', url: ''}, {title: '食饮', url: ''}, {title: '艺术', url: ''}]);
const onSearch = (val) => {
  router.push({
    name: 'shoeList',
    params: {
      title: val
    },
  })
};
let param = {
  detail: '',
  start: 0,
  cnt: 100,
  sort: 0,
}
const homeList = ref([])
getProductList(param).then(result => {
  homeList.value = result.data[0].data;
  console.log(homeList.value);
})
  function onRefresh() {
    console.log('onRefresh')
    getProductList(param).then(result => {
      // console.log(result.data[0].data);
      homeList.value = result.data[0].data;
      console.log(homeList.value);
    })
  }

</script>

<template>
  <div>
    <van-sticky>
      <form action="/">
        <van-search
            v-model="value"
            show-action
            shape="round"
            action-text="分类"
            placeholder="请输入搜索关键词"
            right-icon="photograph"
            @search="onSearch"
            @cancel="$router.push(name='classification')"
        />
      </form>
    </van-sticky>
    <van-tabs v-model:active="active" swipeable shrink lazy-render offset-top="6vh">
      <van-tab v-for="index in title" :title="index.title">
        <refresh @onRefreshItem="onRefresh">
          <van-grid :gutter="7" :border="false" :column-num="5">
            <van-grid-item v-for="value in type" :key="value" :icon="value[1]" :text="value[0]"/>
          </van-grid>
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in homeList" :key="item" default="default" @click="$router.push({name:'shoeDetail',params:{id:item.pid}})">
              <div class="demo-grid-item">
                <van-image
                    :src="item.picture"
                />
                <van-text-ellipsis rows="4"
                                   style="text-align: center;color: var(--van-grid-item-text-color);font-size: 10px"
                                   :content="item.detail"/>
                <div style="text-align: right;color: lightskyblue">¥{{ item.price }}</div>
              </div>
            </van-grid-item>
          </van-grid>
        </refresh>
      </van-tab>
    </van-tabs>
    <van-back-top right="6vw" bottom="10vh"/>
  </div>
</template>

<style lang="less" scoped>

</style>